<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>itcastmark:G:\传智院校实训\远程实训\广西水利和汉中学院\day01\讲义\实训讲义</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<p><style>
    .markdown-body h1 {
      font-size:2em;
    }
    .markdown-body h2 {
      font-size:1.5em;
      border:none;
    }
    img[alt=logoimg] {
      height:44px;
      vertical-align:middle;
    }
</style>
<img src="" alt="logoimg"><font style="font-size:2.6em; vertical-align:middle;"> <strong>前端与移动开发项目实训</strong></font></p>
<h1 id="-">前言</h1>
<p><strong>认识前端</strong></p>
<ul>
<li>什么是前端开发？</li>
<li>前端开发需要掌握哪些技术？  HTML CSS Javascript</li>
<li>前端的发展前景？</li>
</ul>
<p><strong>实训目标</strong></p>
<ol>
<li>理解什么是CSS3</li>
<li>体会CSS3的新特性</li>
<li>通过项目了解CSS3在网页中的应用</li>
<li>通过学习CSS3的动画，制作完成360浏览器页面首屏效果</li>
<li>体验CSS3的伸缩布局</li>
</ol>
<p><strong>本次实训学习要求</strong></p>
<ol>
<li>课堂上尽可能跟着老师思考记录要点</li>
<li>课后反复练习课堂上的案例代码</li>
<li>基础知识要尽可能的记住，因为很常用</li>
</ol>
<h1 id="-">开发环境的配置及开发工具的使用介绍</h1>
<p>下面是前端开发中比较常用的开发工具:</p>
<p><img src="images/s.png" alt="editor"></p>
<p>常见的代码编辑工具有很多，使用起来都大同小异，这里就不一一列举了，我们实训期间只选择webstorm <br></p>
<p>快速生成文档结构  ！+tab 或者  html:5 + Tab键 <br>
快速生成标签 标签名+Tab 键 <br>
快速的书写HTML和CSS的方式还有很多，我们在后面的几天使用中再介绍...</p>
<h1 id="html5-">HTML5简介及常用标签介绍</h1>
<h2 id="-">什么是网页？</h2>
<p>网页就是由文字、图像和超链接等元素构成的一个界面。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。</p>
<h2 id="-">网页是如何显示出来的？常见的五大浏览器？</h2>
<p>前端代码 → 浏览器 → 我们看到的网页 <br></p>
<p>网页只有通过浏览器才能显示出来，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。</p>
<p><img src="images/b.png" alt=""></p>
<p>浏览器的发展历史比较漫长，时间关系，我们就不在这里详述了，<br></p>
<p>有兴趣的同学可以在课后去参考<a href="http://www.iefans.net/wangye-liulanqi-fazhan-xiangshi/">浏览器的发展历史</a>  <br></p>
<h2 id="web-">web标准组成（了解）</h2>
<p>由于浏览器发明最初大家都没有对网页制作形成规范的标准，所以不同的浏览器显示的页面样式都不一样，为了让用户看到的页面统一，W3C组织就提出了一些列的页面制作的规则，我们可以把这些规则理解为Web标准</p>
<p>web标准主要包括：</p>
<p>结构标准:HTML 超文本标记语言 ，     规定了网页的结构。</p>
<p>样式标准:CSS 层叠样式表  ，                规定了网页的样式。</p>
<p>行为标准:Ecma 和DOM(Javascript)， 规定了网页的行为。</p>
<h2 id="-html5-html-">什么是HTML5和以前HTML的关系</h2>
<p>HTML（Hyper Text Markup Language）超文本标记语言 ，主要用来描述页面上的文字、图片、视频、音频等元素。</p>
<p>HTML5是最新版的HTML ，和以前大家见到的HTML是一样的，就像是 苹果5s 和 苹果8 ，HTML5是最新版的HTML标准，它完美兼容以前的HTML版本。</p>
<h2 id="-">什么是标签？</h2>
<p>在HTML页面中，带有“&lt; &gt;”符号的元素被称为HTML标签，如页面中常见的 &lt;html&gt;、&lt;head&gt;、&lt;body&gt;都是HTML标签。所谓标签就是放在“&lt;&gt;” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。</p>
<p>标签的书写格式:</p>
<p>双标签（<font color="red">Tips:/是标签的闭合符号，双标签必须闭合</font>）</p>
<pre><code>    &lt;标签名&gt; 标签内容 &lt;/标签名&gt;
</code></pre><p>例如:</p>
<pre><code>   &lt;body&gt; 文字内容 &lt;body&gt;
</code></pre><p>单标签:</p>
<pre><code>    &lt;标签名 /&gt;
</code></pre><p>例如:</p>
<pre><code>   &lt;hr /&gt; 水平线标签
</code></pre><h2 id="html-">HTML中的常用标签</h2>
<p>HTML5文档结构</p>
<pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;

  &lt;/body&gt;
  &lt;/html&gt;
</code></pre><p>标题标签(h1~h6)</p>
<pre><code>&lt;h1&gt;一级标题&lt;/h1&gt;
&lt;h2&gt;二级标题&lt;/h2&gt;
&lt;h3&gt;三级标题&lt;/h3&gt;
&lt;h4&gt;四级标题&lt;/h4&gt;
&lt;h5&gt;五级标题&lt;/h5&gt;
&lt;h6&gt;六级标题&lt;/h6&gt;
</code></pre><p>段落标签 p</p>
<pre><code>    &lt;p&gt; 段落 &lt;/p&gt;
</code></pre><p>无序列表标签 ul</p>
<pre><code>    &lt;ul&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
</code></pre><p>图像标签img</p>
<pre><code>    &lt;img src=&quot;图片路径/地址&quot; title=&quot;&quot; alt=&quot;&quot;&gt;
</code></pre><p>链接标签 a</p>
<pre><code>    &lt;a href=&quot;#&quot;&gt;链接文字&lt;/a&gt;
</code></pre><p>盒子标签div和 span：就是用来装文字或者其他内容的，没有任何语义</p>
<pre><code>    &lt;div&gt; 内容 &lt;/div&gt;
    &lt;span&gt; 内容 &lt;/span&gt;
</code></pre><p>HTML5比较常用标签</p>
<p>在线文档地址: <a href="http://www.w3school.com.cn/html/index.asp">w3school</a></p>
<p>或者查看<a href="http://www.itcast.cn/">传智官网</a>，也有资料哦~</p>
<pre><code>    &lt;header&gt; 页面头部 &lt;/header&gt;
    &lt;nav&gt; 导航标签 &lt;/nav&gt;
    &lt;footer&gt; 页面底部 &lt;/footer&gt;
    等等一系列新增的语义化标签，他们的用法和传统的标签一样，大家下来可以看看文档，或者W3school ，这里不再赘述
</code></pre><p>总结：</p>
<p>标签其实很简单，大家只需要知道常用的标签，剩下的需要的时候去查看在线文档即可，今天我们把未来几天会用到的标签进行一个简单的总结，希望大家下来多去用！</p>
<h1 id="css-">CSS介绍</h1>
<h2 id="css-css3-">CSS与CSS3简介</h2>
<p><img src="images/html与CSS.jpg" style="float:left; width: 130px;margin-right:5px;" />
早期的HTML包含很少的一些样式属性，但是随着互联网的发展，为了满足更多网页设计者及用户的需要，HTML给自身增加了很多的样式属性，这些属性依附在HTML标签上，导致了使得HTML变得杂乱臃肿，非常不利于后期维护。所以我们的W3C组织制订了CSS，将网页的样式外观和网页的结构相分离。</p>
<p><img src="images/CSS3.jpg" style="float:right; width: 200px;margin-left:5px;" /></p>
<p>CSS（层叠样式表，英文全称Cascading Style Sheets）。</p>
<p>CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，是一门用于对HTML页面外观样式（如字体、颜色、背景的控制及整体排版等）进行修饰和控制的语言。</p>
<p>CSS不仅可以修饰静态网页，还可以配合各种脚本语言对网页元素进行动态的美化。</p>
<p>CSS的出现，不仅解决了HTML早期混乱的样式处理方式，还实现了页面结构（HTML）和页面样式的分离，让网页结构更加清晰易于维护</p>
<p><strong>PS</strong>:咱们现在学的CSS3 其实是 CSS的一个最新的版本 ，就像HTML和HTML5 一样，书写规则都是一样的。新的CSS3为我们增加了很多新的属性，下面我们就一起来了解。</p>
<h2 id="css-">CSS的书写规则</h2>
<p>在CSS中我们定义的所有样式规则都是放在选择器中的（就像是HTML标签必须要带&lt;&gt;一样），具体写法如下：</p>
<pre><code>    选择器 {样式属性1:值1; 样式属性2:值2; ......}
</code></pre><pre><code>例如:
    h1 {color:red; font-size:25px;}
    h1就是选择器
    color是样式属性
    :后面的是属性的值
    每一条样式属性结束使用;
</code></pre><pre><code>    总结:
    1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
    2.属性和属性值以“键值对”的形式出现。
    3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
    4.属性和属性值之间用英文“:”连接。
    5.多个“键值对”之间用英文“;”进行区分。
</code></pre><h1 id="css3-css3-">CSS3选择器及CSS3中的常用属性</h1>
<h2 id="css-">CSS常用的基本选择器</h2>
<p><strong>标签选择器</strong></p>
<p>签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：</p>
<pre><code>标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
</code></pre><p>标签选择器最大的优点是能快速为页面中某一类的标签统一样式，同时这也是他的缺点，不能设计差异化样式。</p>
<p><strong>类选择器</strong></p>
<p>类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：</p>
<pre><code>.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
 标签调用的时候用 class=“类名”  即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
</code></pre><p><strong>Tips：</strong></p>
<pre><code>1.长名称或词组可以使用中横线来为选择器命名。  
2.不建议使用“_”下划线来命名CSS选择器。
3.不要纯数字、中文等命名， 尽量使用英文字母来表示。
</code></pre><p><strong>id选择器</strong></p>
<p>id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：</p>
<pre><code>＃id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本和类选择器相同。
</code></pre><p>Tips:</p>
<pre><code>    由于html元素的id属性值是唯一的，所以定义的id选择器也只能使用一次！
    页面上不允许使用相同id的元素
</code></pre><p><strong>通配符选择器</strong></p>
<p>通配符选择器用“＊”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：</p>
<pre><code>* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
</code></pre><p>例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。</p>
<pre><code>* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}
</code></pre><h2 id="hover-">hover伪类选择器</h2>
<pre><code>:hover {   /* :hover 是元素伪类选择器 当鼠标经过 时候*/
            color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}
</code></pre><h2 id="css3-">CSS3结构伪类选择器</h2>
<p>:first-child :选取属于其父元素的首个子元素的指定选择器</p>
<p>:last-child :选取属于其父元素的最后一个子元素的指定选择器</p>
<p>:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型</p>
<p>:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式</p>
<pre><code>    li:first-child { /*  选择第一个孩子 */
                color: pink; 
            }
    li:last-child {   /* 最后一个孩子 */
                color: purple;
            }
    li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
                color: skyblue;
            }
</code></pre><h1 id="css3-">CSS3中的常用属性</h1>
<h2 id="-">文字相关的样式属性</h2>
<pre><code>    color:设置字体颜色
    color属性可以用于设置字体颜色，常用的两种写法：
    可以设置 #ffffff 16进制的值，也可以设置表示颜色的英文单词
    例如:设置所有p的文字颜色为红色
    p {color:red;}或者p {color:#f40;}

    font-size:字体大小
    font-size属性用于设置字号，该属性的值可以使用很多中单位，其中最常用的是px。这里我们用px做为表示字体大小的单位。

    font-family:字体 
    font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等
    例如将网页中所有段落文本的字体设置为微软雅黑：
    p{ font-family:&quot;微软雅黑&quot;;}
</code></pre><pre><code>    line-height:设置段落行高， 行高属性的值一般都带有单位，只有少数情况会设置百分比以及不带单位
    例如: p {line-height:20px} 设置所有段落的行高为20px
    利用设置网页中的文字垂直居中：
    div { height:50px; line-height:50px; }当行高和盒子高度设置一样的时候，盒子中的文字会垂直居中
</code></pre><pre><code>    text-align设置文字水平对齐left/center/right
    例如：
    设置文字水平居中对齐
    h1 { text-align:center; }

    text-indent设置段落首行缩进，单位有两种，em和px，  1em=1个字的大小（字是多少px，1em就等于多少）
    例如:
    p {text-indent:2em;}设置所有的段落缩进2个字的大小
    text-shadow 设置文字阴影
    text-shadow:水平位置（必须要写） 垂直位置（必须要写） 模糊距离 阴影颜色;\
</code></pre><p>如图:
<img src="images/shadow.png"></p>
<h2 id="-">页面排版常用属性</h2>
<pre><code>    width设置元素宽度
    height设置元素高度
    padding设置元素内边距(盒子边框和盒子内容之间的距离)
    margin设置元素外边距(盒子和盒子之间的距离)
    关于CSS3盒模型的详细介绍，我们在后面讲解

    float设置元素浮动显示（left/right）
    Tips:设置多个块级元素同一行显示，可以设置浮动
</code></pre><p>由于本次实训中没有涉及太多页面布局和定位相关的使用，我们就不花太多时间在浮动和定位这方面了
对页面布局感兴趣的同学详情见<a href="http://www.itcast.cn/">传智官网</a></p>
<h2 id="-">元素的背景及边框样式属性</h2>
<pre><code>    border设置元素的边框样式
    例如:
    div { border:1px solid red } //为div设置一条 1px 宽的 红色 边框
    border: 边框宽度 边框样式 边框颜色
    边框样式：solid 实线 dotted 点线 

    设置CSS3圆角边框 (半径单位：px)
    border-radius: 上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)
    CSS圆形：border-radius:50% 50%;
</code></pre><pre><code>    background-color:设置元素的背景颜色 
    CSS中颜色常用的表示方式有：
    使用颜色英文单词： 例如：red  pink  purple 等等
    HEX 16进制表示法： 例如：#ffffff 白色 #000000 黑色
    RGB 表示法：红绿蓝三位每一位都取0~255之间的值  例如： rgb(255,255,255) 白色   rgb(0,0,0)黑色 

    background-image:设置元素的背景图片
    background-repeat:设置元素背景图片是否平铺  默认平铺 一般设置不平铺 no-repeat
    background-position:设置背景图片位置 可以使用 具体的坐标 也可以使用方位名词 center top bottom left right

    设置单一背景图像(综合)
    background: 背景颜色 url(背景图片地址) no-repeat是否重复 背景图片位置
</code></pre><p>Ps背景属性相对比较多，我们今天只针对比较常用的进行了说明，后面针对CSS3进行补充...</p>
<h1 id="css3-">CSS3的背景属性技巧</h1>
<pre><code>  CSS3设置透明背景颜色
    background-color:rgba(0,0,0, 0.3) //半透明黑色
            取值范围
    r:红色位 0~255
    g:绿色位 0~255
    b:蓝色位 0~255
    a：透明度 0~1

  CSS3设置多组背景图片：

    background:url(test1.jpg) no-repeat 10px 20px,
               url(test1.jpg) no-repeat 10px 20px,
               url(test1.jpg) no-repeat 10px 20px #aaa;

    Tips:其实多背景设置写法与单背景类似，只是需要大家注意，每一张背景图片之间需要用 逗号分割，背景颜色需要设置在最后

  CSS3设置背景图片大小:

    background-size:
    通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

    background-image: url(&#39;xxx.jpg&#39;);
            background-size: 300px 100px;
            /* background-size: contain; */
            /* background-size: cover; */
</code></pre><h1 id="css3-">CSS3的盒模型介绍</h1>
<h2 id="css3-">CSS3盒模型</h2>
<p>CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。</p>
<p>可以分成两种情况：</p>
<p>1、box-sizing: content-box(传统盒模型) 盒子实际大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode</p>
<p><img src="images/boxModule.gif" width="300"></p>
<p>注: 在传统的盒模型中我们设置的width和height 指的是 content 的宽度和高度，不包括 padding和border ，而盒子真实的大小 = width和height + padding +border</p>
<p>2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的。
CSS3盒模型 border-box 会让浏览器自动帮我们计算盒子的大小，让盒子的实际大小=我们设置的width和height。</p>
<p>注：在大部分情况下无论是CSS3的盒模型还是标准的盒模型，都是不计算margin外边距的，只有当我们实际在处理页面布局多个盒子之间位置关系时候才会考虑！</p>
<p>案例:</p>
<pre><code>div:first-child {
            width: 200px;
            height: 200px;
            background-color: pink; 
            box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */
            padding: 10px;
            border: 15px solid red;
            /* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
        }
        div:last-child {
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            box-sizing: border-box;   /* padding border  不撑开盒子 */
            border: 15px solid red;
            /* margin: 10px; */
            /* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}
</code></pre><h1 id="-">常见的元素显示模式</h1>
<p><strong>块级元素(block-level)</strong></p>
<p>每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。</p>
<pre><code>常见的块元素有&lt;h1&gt;~&lt;h6&gt;、&lt;p&gt;、&lt;div&gt;、&lt;ul&gt;、&lt;ol&gt;、&lt;li&gt;等，其中&lt;div&gt;标签是最典型的块元素。
</code></pre><p>块级元素的特点：</p>
<p>（1）总是从新行开始</p>
<p>（2）高度，行高、外边距以及内边距都可以控制。</p>
<p>（3）宽度默认是容器的100%</p>
<p>（4）可以容纳内联元素和其他块元素。</p>
<p><strong>行内元素(inline-level)</strong></p>
<p>行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。</p>
<pre><code>常见的行内元素有&lt;a&gt;、&lt;strong&gt;、&lt;b&gt;、&lt;em&gt;、&lt;i&gt;、&lt;del&gt;、&lt;s&gt;、&lt;ins&gt;、&lt;u&gt;、&lt;span&gt;等，其中&lt;span&gt;标签最典型的行内元素。
</code></pre><p>行内元素的特点：</p>
<p>（1）和相邻行内元素在一行上。</p>
<p>（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。</p>
<p>（3）默认宽度就是它本身内容的宽度。</p>
<p>（4）行内元素只能容纳文本或则其他行内元素。（a特殊）</p>
<p>注意:</p>
<ol>
<li>只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能嵌套其他块级元素。</li>
<li>链接里面不能再放链接。</li>
</ol>
<p><strong>行内块元素（inline-block）</strong></p>
<p>在行内元素中有几个特殊的标签——&lt;img /&gt;、&lt;input /&gt;、&lt;td&gt;，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。</p>
<p>行内块元素的特点：</p>
<p>（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。</p>
<p>（2）默认宽度就是它本身内容的宽度。</p>
<p>（3）高度，行高、外边距以及内边距都可以控制。</p>
<p><strong>标签显示模式转换 display属性</strong></p>
<p>块转行内：display:inline;</p>
<p>行内转块：display:block;</p>
<p>块、行内元素转换为行内块： display: inline-block;</p>
<p>目前我们最常用的就是这三种模式，其他的我们暂时不提</p>
<h1 id="-css3-">使用CSS3添加盒子阴影</h1>
<p><strong>文字阴影案例--CSS3凹凸文字效果</strong></p>
<pre><code>  &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;style&gt;
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font-weight: 700; /*设置字体粗细*/
            font-size:80px;
            font-family: &quot;微软雅黑&quot;;
        }
        div:first-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色;
            多组阴影顺序：上右下左，使用逗号分隔 
            根据网页坐标 向上移动是负值，向左移动是负值
            */
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }

        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div&gt;我是凸起的文字&lt;/div&gt;
    &lt;div&gt;我是凹下的文字&lt;/div&gt;
    &lt;/body&gt;
</code></pre><p><strong>CSS3设置盒子阴影</strong></p>
<p>语法格式：</p>
<pre><code>box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；
</code></pre><p><img src="images/box-shadow.png" ></p>
<p>注意:</p>
<p>前两个属性是必须写的。其余的可以省略。</p>
<p>外阴影 (outset) 但是不能写 默认 想要内阴影 inset</p>
<p>例如:</p>
<pre><code>    div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
            /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
            box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

}
</code></pre><h1 id="css-">CSS复合选择器补充</h1>
<p><strong>后代选择器</strong></p>
<p>后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
<img src="images/hou.png"></p>
<p><strong>CSS3伪元素选择器</strong></p>
<p>伪元素::before和伪元素::after
在元素内部的开始位置和结束位创建一个元素，该元素为<strong>行内元素，且必须要结合content属性使用</strong>。</p>
<pre><code> div::befor {
  content:&quot;之前&quot;;
}
div::after {
  content:&quot;之后&quot;;
}
</code></pre><p>:after和:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下:after、:before会被自动识别为::after、::before，这样做的目的是用来做兼容处理。</p>
<p>CSS3中新增了很多选择器，由于兼容性关系，这里我们就先介绍到这。</p>
<h1 id="css3-">CSS3过渡动画体验</h1>
<p>过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。</p>
<p>帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如早期的电影胶片（每秒24帧）</p>
<p>Tips:一帧指的就是一个画面，一般超过15帧每秒就已经形成动画了我们的眼睛据说最多可以识别到每秒30帧</p>
<p><img src="images/ani.png" width="200">
<img src="images/zhen.gif" width="200"></p>
<p>在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。</p>
<pre><code>  transition: 要过渡的属性  花费时间  动画的速度  何时开始;
  如果有多组属性变化，还是用逗号隔开。
</code></pre><table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>transition</td>
<td>简写属性，用于在一个属性中设置四个过渡属性。</td>
<td>3</td>
</tr>
<tr>
<td>transition-property</td>
<td>规定应用过渡的 CSS 属性的名称。</td>
<td>3</td>
</tr>
<tr>
<td>transition-duration</td>
<td>定义过渡效果花费的时间（动画的长度）。默认是 0。</td>
<td>3</td>
</tr>
<tr>
<td>transition-timing-function</td>
<td>规定过渡效果的时间曲线。默认是 &quot;ease&quot;。</td>
<td>3</td>
</tr>
<tr>
<td>transition-delay</td>
<td>规定过渡效果何时开始。默认是 0。</td>
<td>3</td>
</tr>
</tbody>
</table>
<p>如果想要所有的属性都变化过渡， 写一个all 就可以了</p>
<p>transition-duration 花费时间 单位是 秒 s 或者 毫秒 ms</p>
<p>动画的速度曲线（其实指的是动画播放的速度，匀速、由快变慢等等） 默认是 ease （由慢变快） 如下图所示：</p>
<p><img src="images/speed.png"></p>
<p>transition-delay动画开始时间   默认是 0s 立即开始</p>
<p>案例代码：</p>
<pre><code>  div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
            transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
            /* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */


}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */

            width: 600px;
            height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面两个属性可以省略 */
</code></pre><h1 id="css3-transform-2d-">CSS3变换属性transform 2D变换</h1>
<p>transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。</p>
<p>CSS3的transform （英文翻译:变形，变换）属性  可以让元素像   transformers 变形金刚 一样改变形状
<img src="images/tran.gif"></p>
<p>我们先来学CSS3中的2D变换属性 ，这里的2D是基于平面的一些属性</p>
<h2 id="-translate-x-y-">元素移动属性 translate(x, y)</h2>
<p>translate 移动属性
<img src="images/translate.png"></p>
<pre><code>  translate(x水平移动距离,y垂直移动距离);
  translate(50px,50px);
  使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
</code></pre><p>可以改变元素的位置，x、y可为负值；</p>
<pre><code>   translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
   translateX(x)仅水平方向移动（X轴移动）
   translateY(Y)仅垂直方向移动（Y轴移动）
</code></pre><p>案例：让盒子水平垂直居中</p>
<pre><code>    .box {
    width: 400px;
    height: 400px;
    background: pink;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);  /* 走自身大小的一半*/
  }
</code></pre><h2 id="-scale-x-y-">元素缩放属性 scale(x, y)</h2>
<p><img src="images/scale.png"></p>
<p>scale()的取值默认的值为1，</p>
<p>当值设置为0.01到0.99之间的任何值，作用是一个元素缩小；</p>
<p>相反任何大于或等于1.0的值，作用是让元素放大</p>
<pre><code>  transform:scale(0.8,1);
  可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
  scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
  scaleX(x)元素仅水平方向缩放（X轴缩放）
  scaleY(y)元素仅垂直方向缩放（Y轴缩放）
</code></pre><h2 id="-rotate-deg-">元素旋转属性rotate(deg)</h2>
<p><img src="images/rotate.png"></p>
<pre><code>    transform:rotate(45deg);  将元素旋转45度
    注意单位是 deg 度数
</code></pre><h2 id="-skew-deg-deg-">元素的倾斜属性 skew(deg, deg)</h2>
<p><img src="images/skew.png" ></p>
<pre><code>    transform:skew(30deg,0deg);
    该实例通过skew方法把元素水平方向上倾斜30度，垂直方向保持不变。
</code></pre><p>可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。</p>
<h2 id="transform-origin-">transform-origin调整元素的变形原点</h2>
<p><img src="images/origin.png"></p>
<pre><code>div{transform-origin: left top;transform: rotate(45deg); }  /* 改变元素原点到左上角，然后进行顺时旋转45度 */
如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。

 div{transform-origin: 10px 10px;transform: rotate(45deg); }  /* 改变元素原点到x 为10  y 为10，然后进行顺时旋转45度 */
</code></pre><p>修改原点案例：</p>
<pre><code>        &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;style type=&quot;text/css&quot;&gt;
          .bigbox {
            width: 600px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid red;
            position: relative;  /*设置父元素相对定位*/
          }
          .box {      /*给所有子元素设置统一位置*/
            width: 200px;
            height: 100px;
            border: 1px solid #000;
            top:50%;
            left:25%;
            transform-origin: top right;
            transition: all 2s;
            position: absolute;
          }
          /*由于定位的默认层级关系，最后一个盒子位于最上方*/
          /*旋转一周是360度*/
          .bigbox:hover .box:nth-child(1) {
            transform: rotate(90deg); /*第1个盒子需要旋转90度*/
            background-color: purple;
          }
          .bigbox:hover .box:nth-child(2) {/*第2个盒子需要旋转180度*/
            transform: rotate(180deg);
            background-color: green;
          }
          .bigbox:hover .box:nth-child(3) {/*第3个盒子需要旋转270度*/
            transform: rotate(270deg);
            background-color: blue;
          }
          .bigbox:hover .box:nth-child(4) {/*第4个盒子需要旋转360度*/
            transform: rotate(360deg);
            background-color: red;
          }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;div class=&quot;bigbox&quot;&gt;
      &lt;div class=&quot;box&quot;&gt;
      1
      &lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;
      2
      &lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;
      3
      &lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;
      4
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/body&gt;
</code></pre><p>今天我们先把2D变换学完，明天学习3D变换以及真正的CSS动画！</p>
<h1 id="css3-transform-3d-">CSS3变换属性transform  3D变换</h1>
<p>元素的2D变换只停留在平面内，换句话说 只能完成平面坐标系中的 X轴和Y轴的 形态变换</p>
<p>而元素的3D变换则可以给用户呈现立体的效果，但是 在浏览器中它们的工作原理是基本一样的，唯一不同的就是3D变换是在一个三维立体坐标系中进行形态变换，比2D变换多出了一个 Z轴的变换方式（而立体坐标Z轴则是垂直于我们的屏幕）。</p>
<p>2D变换： X   Y</p>
<p>3D 变换 ：X   Y   Z</p>
<p>三维立体坐标系又叫左手坐标系</p>
<p>伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图</p>
<p><img src="images/lefth.png"></p>
<p>CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图
<img src="images/3d.png"></p>
<p>简单记住他们的坐标：</p>
<p> x 左边是负的，右边是正的</p>
<p> y 上面是负的， 下面是正的</p>
<p> z 往电脑里面是负的， 向我们的方向是正的</p>
<h2 id="3d-">3D旋转属性</h2>
<p>rotateX(deg)  设置元素沿着X轴立体旋转</p>
<p><img src="images/rx.png" width="400"></p>
<p>x轴旋转案例</p>
<pre><code>  img {
  transition:all 0.5s ease 0s;
}
img:hover {

  transform:rotateX(180deg);
}
</code></pre><p>rotateY(deg)  设置元素沿着Y轴立体旋转</p>
<p><img src="images/ry.png" width="400"></p>
<p>y轴旋转案例</p>
<pre><code>img {
  transition:all 0.5s ease 0s;
}
img:hover {

  transform:rotateX(180deg);
}
</code></pre><p>rotateZ(deg)  设置元素沿着Z轴立体旋转</p>
<p><img src="images/rz.jpg" width="400"></p>
<p>注意:3D中的沿z轴立体旋转在单独设置的时候 和2D中的旋转 视觉效果是一样的！</p>
<pre><code>img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) ;
  skew(0,10deg); */这里的z轴旋转我们一般配合其他变形效果一起使用
}
</code></pre><h2 id="-perspective-">透视距离属性(perspective)</h2>
<p>由于电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，我们需要调整透视距离实现此目的。（通过调整眼睛到屏幕中元素的距离来体现3D效果）</p>
<p>透视可以将一个2D平面，在转换的过程当中，呈现3D效果。</p>
<ul>
<li>透视原理：<strong> 近大远小</strong> 。</li>
<li>浏览器透视：把近大远小的所有图像，透视在屏幕上。</li>
<li>perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置</li>
</ul>
<p>perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素</p>
<p>透视距离其实就是眼睛到屏幕中元素的距离： 
<img src="images/ts.png" width="350"></p>
<p>核心:<strong>视距越大，效果越不明显；视距越小效果越明显</strong></p>
<p>简而言之一般我们需要实现3D效果的时候，我们就需要设置perspective</p>
<h2 id="translate3d-x-y-z-">translate3d(x,y,z) 移动属性</h2>
<p>translateX(x) 水平方向沿x轴移动</p>
<p><img src="images/tx.png"></p>
<p>translateY(y) 垂直方向沿y轴移动</p>
<p><img src="images/ty.png"></p>
<p>translateZ(z)</p>
<p>注意:translateZ( z )单独设置是没有效果的，我们需要配合perspective透视的属性使用！</p>
<p>transformZ的直观表现形式就是大小变化（很像2D变换的缩放效果），但实质是XY平面相对于视点的远近变化（这里指的是元素从屏幕到我们眼睛的之间距离）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。</p>
<p>translate3d(x,y,z)</p>
<p>[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值</p>
<p><strong>翻页效果案例</strong></p>
<pre><code>&lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;简单翻页效果&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;
          body {
            perspective: 800px;  增加设置透视视距
          }
          .box {
            margin: 50px auto;   让盒子居中显示
          }
          .book {
            transform-origin: left;     修改变形原点为左边
            transition: transform 3s;  设置过渡动画
            position: absolute;   设置定位让元素叠在一起
            left: 35%;
          }
          .page {
            width: 300px;
            height: 374px;
            background-color: #eee;
            position: absolute;
            left: 35%;
          }
          body:hover .book{
            transform: rotateY(-180deg);   当鼠标放到body上面的时候 设置元素3d垂直旋转
          }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;box&quot;&gt;
          &lt;div class=&quot;page&quot;&gt;我是内容&lt;/div&gt;
          &lt;div class=&quot;book&quot;&gt;&lt;img src=&quot;book.jpg&quot; width=&quot;300&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
</code></pre><h1 id="css3-">CSS3动画制作</h1>
<p>动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。</p>
<p>语法格式：</p>
<pre><code>animation:动画名称 动画时间 运动曲线  何时开始  播放次数(infinite无限重复)  是否反方向;
</code></pre><p><img src="images/animation.png"></p>
<p>CSS3中制作动画分为两部分：
1.定义动画</p>
<pre><code>  @keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}
</code></pre><p>2.调用动画</p>
<pre><code>animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;
</code></pre><p>小汽车案例</p>
<pre><code>  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        img {
            /*animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
            animation: car 5s infinite;  /*引用动画*/
        }
        /*定义动画*/
        @keyframes car {
            0% {
                transform: translate3d(0, 0, 0);
            }
            50% {
                transform: translate3d(1000px, 0, 0);
            }
            51% {
                transform: translate3d(1000px, 0, 0) rotateY(180deg);
                /*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/
            }
            100% {
                transform: translate3d(0, 0, 0) rotateY(180deg);
                /*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/
            }

        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img src=&quot;images/car.jpg&quot;  width=&quot;100&quot; alt=&quot;&quot;/&gt;
&lt;/body&gt;
</code></pre><h1 id="css3-">CSS3 字体图标库的使用</h1>
<p><strong>为什么要使用字体图标库？</strong></p>
<p>由于某些时候网页上的一些特殊字体无法使用字体，以前的做法我们就只能把这部分内容做成图片；虽然做成图片是有诸多优点的（很多的阴影，圆角，还有一些特殊形状和特殊符号等等），但是缺点也很明显，比如图片不但增加了总文件的大小，还增加了很多额外的&quot;http请求&quot;，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真（放大会有马赛克）。 在移动端页面的开发中，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出重新被提起。。 这就是字体图标（iconfont).</p>
<p><strong>字体图标的优点</strong></p>
<pre><code>可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备必备良药...
</code></pre><p><strong>常见的字体图标库</strong></p>
<p>阿里icon font字库</p>
<p><a href="http://www.iconfont.cn/">http://www.iconfont.cn/</a></p>
<p>这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！</p>
<p>Font-Awesome</p>
<p><a href="http://fortawesome.github.io/Font-Awesome/">http://fortawesome.github.io/Font-Awesome/</a></p>
<p>这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。</p>
<p>Glyphicon Halflings</p>
<p><a href="http://glyphicons.com/">http://glyphicons.com/</a></p>
<p>这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。</p>
<p>Icons8</p>
<p><a href="https://icons8.com/">https://icons8.com/</a></p>
<p>提供PNG免费下载，像素大能到500PX</p>
<p>网上有许多这样的字体库，这里不再赘述...</p>
<p><strong>下载及使用</strong></p>
<p>这里以 Font Awesome 为例   <a href="http://fontawesome.dashgame.com/">http://fontawesome.dashgame.com/</a></p>
<h1 id="css3-">CSS3伸缩布局的使用</h1>
<p>CSS3伸缩布局又称为弹性盒布局，是 CSS3 的一种新的布局模式，当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。让我们的网页能够适应不同大小的屏幕尺寸，更好的兼容移动端设备 ，是目前在移动端页面中应用比较广泛的布局方式。PC主流浏览器现在也已经都支持这个属性了。</p>
<p>在CSS3中的弹性布局主要由两部分组成 : 弹性容器(Flex container)和弹性子元素(Flex item)</p>
<p>首先要使用弹性和布局，我们需要先设置弹性容器（将某个父元素指定为弹性父盒子）
Tips:这里我们暂时不考虑浏览器的兼容性问题！所以不需要加浏览器前缀</p>
<pre><code>    .flex-container {
        display: flex;   /*通过指定display: flex;属性将盒子设置为弹性盒子*/
        width: 100%;
        height: 350px;
        background-color: skyblue;
    }
</code></pre><p>主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向</p>
<p>侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的</p>
<p>方向：默认主轴从左向右，侧轴默认从上到下</p>
<p>主轴和侧轴并不是固定不变的，通过flex-direction可以进行切换。</p>
<p><img src="images/flex.png"></p>
<p><strong>flex布局属性详解</strong></p>
<p>1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配</p>
<p>min-width 最小宽度 min-width: 280px 最小宽度 不能小于 280</p>
<p>max-width: 1280px 最大宽度 不能大于 1280</p>
<p>2.flex-direction调整主轴方向（默认为水平方向，设置元素水平还是垂直缩放排列）</p>
<p>flex-direction: column 垂直排列</p>
<p>flex-direction: row 水平排列</p>
<p>3、justify-content调整主轴对齐（设置子元素水平对齐方式）</p>
<p>子盒子如何在父盒子里面水平对齐</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-start</td>
<td>默认值。项目位于容器的开头。</td>
<td>让子元素从父容器的开头开始排序但是盒子顺序不变</td>
</tr>
<tr>
<td>flex-end</td>
<td>项目位于容器的结尾。</td>
<td>让子元素从父容器的后面开始排序但是盒子顺序不变</td>
</tr>
<tr>
<td>center</td>
<td>项目位于容器的中心。</td>
<td>让子元素在父容器中间显示</td>
</tr>
<tr>
<td>space-between</td>
<td>项目位于各行之间留有空白的容器内。</td>
<td>左右的盒子贴近父盒子，中间的平均分布空白间距</td>
</tr>
<tr>
<td>space-around</td>
<td>项目位于各行之前、之间、之后都留有空白的容器内。</td>
<td>相当于给每个盒子添加了左右margin外边距</td>
</tr>
</tbody>
</table>
<p>4、align-items调整侧轴对齐（设置子元素垂直对齐方式）</p>
<p>子盒子如何在父盒子里面垂直对齐（单行）</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>stretch</td>
<td>默认值。项目被拉伸以适应容器。</td>
<td>让子元素的高度拉伸适用父容器（子元素不给高度的前提下)</td>
</tr>
<tr>
<td>center</td>
<td>项目位于容器的中心。</td>
<td>垂直居中</td>
</tr>
<tr>
<td>flex-start</td>
<td>项目位于容器的开头。</td>
<td>垂直对齐开始位置 上对齐</td>
</tr>
<tr>
<td>flex-end</td>
<td>项目位于容器的结尾。</td>
<td>垂直对齐结束位置 底对齐</td>
</tr>
</tbody>
</table>
<p>5、flex-wrap控制是否换行</p>
<p>当我们子盒子内容宽度多于父盒子的时候如何处理</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>nowrap</td>
<td>默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示</td>
</tr>
<tr>
<td>wrap</td>
<td>规定灵活的项目在必要的时候拆行或拆列。</td>
</tr>
<tr>
<td>wrap-reverse</td>
<td>规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。</td>
</tr>
</tbody>
</table>
<h1 id="-">伸缩布局-携程网案例</h1>
<p><a href="http://m.ctrip.com/html5/">http://m.ctrip.com/html5/</a> 携程网手机端地址</p>
<p>案例效果图:</p>
<p><img src="images/携程效果图.png"> </p>
<h1 id="css3-360-">CSS3 动画网页-360浏览器首页</h1>
<p>案例效果图:</p>
<p>第一屏</p>
<p><img src="images/xgt.png"></p>
<p>第二屏</p>
<p><img src="images/2.jpg"></p>
<p>第三屏</p>
<p><img src="images/3.jpg"></p>
<p>案例分析：</p>
<p>1.全屏页面：鼠标可以滚动页面，但是没有滚动条（由于大家没有接触过js和jQuery，在这里我们选择使用jQuery里面的一个全屏插件：fullpagejs,使用相对简单）</p>
<p>2.每次滚动只滚动一个屏幕 高度 的距离</p>
<p>3.滚动到每一个屏幕上面都有一个过渡动画效果</p>
<p>4.这里大家可以看到其实每一个屏幕的动画是已经有的，但是在我们的页面上是只有等用户滚动到相应的页面才执行动画效果</p>
<p>5.我们的关键的问题在于 什么时候执行动画？在这个页面里面动画不是一开始就执行的，而是到了某一个屏幕才执行的</p>
<p>fullpage插件的使用:</p>
<p>我们使用的Jquery插件：fullpage.js </p>
<p>在线文档地址<a href="http://www.dowebok.com/77.html">http://www.dowebok.com/77.html</a></p>
<p>或者<a href="http://fullpage.81hu.com/">http://fullpage.81hu.com/</a></p>
<p>fullpage插件使用方法：</p>
<p>1.引入插件 </p>
<pre><code>  &lt;!-- 由于我们使用的是jQuery插件，所以我们需要先将jQuery引入 --&gt;
    &lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;!--引入全屏滚动插件 fullpage js--&gt;
    &lt;script src=&quot;js/jquery.fullPage.min.js&quot;&gt;&lt;/script&gt;
</code></pre><p>2.HTML文档结构</p>
<pre><code>&lt;!--这里的fullpage 是全屏页面的容器元素，
也就是说我们所有要展示的那几屏都是要放到我们 这个标签里面的--&gt;
&lt;div id=&quot;fullpage&quot;&gt;
    &lt;!--这里的每一个section 指的就是我们看到的每一屏界面--&gt;
    &lt;div class=&quot;section&quot;&gt;  
        &lt;h3&gt;第一屏&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;第二屏&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;第三屏&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;第四屏&lt;/h3&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre><p>每个 section 代表一屏，需要多少我们就写多少section，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，这里我们不需要进行设置</p>
<p>3.Javascript设置（这里我们写的都是Jquery代码，大家可以直接拿来用）</p>
<pre><code>  // jquery 的入口函数    $(function(){ });
    //    类似于C语言的 main函数
    $(function(){
        //获取我们的全屏页面的容器元素  一个id叫fullpage的元素 
        $(&#39;#fullpage&#39;).fullpage({
            //设置每一 屏  的颜色 ,如果需要修改，直接 修改 [‘里面的内容’]
            sectionsColor:[&#39;pink&#39;,&#39;skyblue&#39;,&#39;purple&#39;,&#39;yellow&#39;,&#39;green&#39;],
            //滚动到每一屏的回调函数：其实就是设置我们滚动到每一屏以后要做什么
            //这里的index指的是当前屏幕的索引（序号）
            // 这里索引从1开始
            //achorLink要传入的链接名称（这里我们不用，不需要管）
            afterLoad:function(achorLink,index) {
                 //让动画隔500ms后执行
                 setTimeout(function(){
                  //每次回到当前屏幕的时候（这里有个问题，我们js添加过后的样式会一直存在到浏览器关闭），先将其他屏幕的curr类名移除（案例中我们借用curr这个空类名表示 当前的屏幕，触发动画）
                    $(&#39;.section&#39;).removeClass(&#39;curr&#39;);
                     // 再给当前屏幕添加该样式
                    $(&#39;.section&#39;).eq(index-1).addClass(&quot;curr&quot;);
                },500);
            }
        });
    });
</code></pre><p><strong>拓展说明：</strong></p>
<p>什么是JavaScript、 jQuery、和JQuery插件？</p>
<p>Javascript是一门基于浏览器的运行，面向过程的脚本编程语言，目前主要应用于web网页特效的开发
JQuery是JavaScript的一个框架或者说是库（通俗来讲就是一堆的js函数放到了一起形成的文件），
jQuery是目前市面上应用最广泛的JavaScript框架，它里面封装了我们日常最常用的一些功能，极大的简化了我们使用JavaScript编程。</p>
<h1 id="-css3-3d-">扩展内容-CSS3轮播图-3D旋转轮播图</h1>
<p><img src="images/3dxgt.png"></p>
<p>CSS3属性扩展：transform-style</p>
<p>transform-style属性是3D空间一个重要属性，指定嵌套元素在屏幕内的呈现方式。
它主要有两个属性值：flat和preserve-3d。</p>
<p>其中flat值为默认值，表示所有子元素在2D平面呈现。</p>
<p>preserve-3d表示所有子元素在3D空间中呈现。</p>
<p><img src="images/p3d.png"></p>
<p>动画停止播放属性：animation-play-state:paused;  </p>
<p>CSS3背景线性渐变属性</p>
<p>Tips:目前CSS3中渐变属性还没有被完全支持，浏览器兼容性比较差，这里我们只讲解线性渐变</p>
<pre><code>语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色);

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....);
</code></pre>
          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>